<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签页通信</title>
</head>
<body>

</body>
<script>
    // 使用 MessageChannel 可以实现深拷贝。这是因为 MessageChannel 
    // 在传递消息时会对数据进行结构化克隆（structured clone），
    // 这个过程可以深度克隆大多数 JavaScript 对象。结构化克隆算法是浏览器用来克隆对象的内部算法，
    // 它支持包括对象、数组、日期、RegExp 等在内的大多数数据类型。
    function deepClone (obj) {
        return new Promise((resolve) => {
            if (obj === null || typeof obj !== 'object') {
                resolve(obj)
            }
            const { port1, port2 } = new MessageChannel()
            port1.postMessage(obj)
            port2.onmessage = (msg) => {
                resolve(msg.data)
            }
        })
    }

    var obj = {
        a: 1,
        b : 2
    }
    obj.c = obj
    deepClone(obj).then(res => {
        console.log('res', res)
    })

    // 注意事项
    //     性能：使用 MessageChannel 进行深拷贝的性能可能不如某些原生深拷贝函数（如 JSON 序列化和反序列化），
    //     特别是在处理大对象时。因此，需要根据具体情况权衡性能和兼容性。
    //     兼容性：结构化克隆算法支持大多数常见的数据类型，但不支持某些类型（如函数、DOM 节点等）。在使用前需要确认数据的类型是否兼容。
</script>
</html>